<!-- 分类页 -->
<template>
  <view class="container">
    <!-- 头部区域 -->
    <view class="header">
      <view class="location">
        <uni-icons type="location" size="20" color="#333"></uni-icons>
        <text class="location-text">{{ currentCity }}</text>
      </view>
      <view class="search-box">
        <uni-icons type="search" size="20" color="#666"></uni-icons>
        <input type="text" placeholder="搜索非遗皮影" v-model="searchKey" class="search-input"/>
      </view>
      <view class="notification" @tap="checkNotification">
        <uni-icons type="notification" size="24" color="#333"></uni-icons>
        <view v-if="unreadCount" class="badge">{{ unreadCount }}</view>
      </view>
    </view>
    
    <!-- 分类标题 -->
    <view class="category-header">
      <text class="category-title">{{ currentCategory }}</text>
    </view>
    
    <!-- 分类描述 -->
    <view class="category-desc" v-if="currentCategoryDesc">
      <text>{{ currentCategoryDesc }}</text>
    </view>
    
    <!-- 产品列表 -->
    <view class="product-list">
      <view class="product-item" v-for="product in currentProducts" :key="product.id" @tap="viewProduct(product.id)">
        <image class="product-image" :src="product.imageUrl" mode="aspectFill"></image>
        <view class="product-info">
          <text class="product-name">{{ product.name }}</text>
          <text class="product-price">¥{{ product.price }}</text>
          <text class="product-desc">{{ product.description }}</text>
          <text class="product-craftsman">匠人: {{ product.craftsman }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import shuju from '../../../shuju.json';

// 定义数据类型
interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
  details: string;
  craftsman: string;
  imageUrl: string;
}

interface Category {
  id: number;
  name: string;
  icon: string;
  description: string;
  products: Product[];
}

// 响应式数据
const currentCity = ref('北京市');
const searchKey = ref('');
const unreadCount = ref(0);
const currentCategory = ref('');
const currentCategoryDesc = ref('');
const currentProducts = ref<Product[]>([]);

// 计算属性：根据分类筛选商品
const filteredProducts = computed(() => {
  if (!currentCategory.value) return [];
  return currentProducts.value.filter(product => 
    product.name.includes(searchKey.value) || 
    product.description.includes(searchKey.value)
  );
});

// 方法
const checkNotification = () => {
  uni.navigateTo({
    url: '/pages/notification/notification'
  });
};

const viewProduct = (id: number) => {
  uni.navigateTo({
    url: `/pages/product/product?id=${id}`
  });
};

// 初始化分类数据
const initCategoryData = (categoryName: string) => {
  const category = shuju.categories.find(cat => cat.name === categoryName);
  if (category) {
    currentCategory.value = category.name;
    currentCategoryDesc.value = category.description;
    currentProducts.value = category.products;
  }
};

onMounted(() => {
  // 获取传递过来的分类参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options;
  
  if (options.category) {
    const categoryName = decodeURIComponent(options.category);
    currentCategory.value = categoryName;
    initCategoryData(categoryName);
  }
  
  uni.setNavigationBarTitle({
    title: currentCategory.value || '分类商品'
  });
});
</script>

<style>
page {
  height: 100%;
  background-color: #f7f7f7;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.header {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.location {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
  padding: 6rpx 12rpx;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 24rpx;
}

.location-text {
  font-size: 28rpx;
  color: #333;
  margin-left: 8rpx;
  max-width: 160rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 32rpx;
  padding: 16rpx 24rpx;
  margin: 0 20rpx;
  transition: all 0.3s ease;
}

.search-box:active {
  background-color: #ebebeb;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  margin-left: 16rpx;
  color: #333;
}

.search-input::placeholder {
  color: #999;
}

.notification {
  position: relative;
  padding: 8rpx;
}

.badge {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 20rpx;
  min-width: 32rpx;
  height: 32rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6rpx;
  transform: translate(25%, -25%);
  box-shadow: 0 2rpx 4rpx rgba(255, 77, 79, 0.2);
}

.category-header {
  padding: 30rpx;
  background-color: #fff;
  margin-top: 20rpx;
}

.category-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  position: relative;
  padding-left: 24rpx;
}

.category-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8rpx;
  height: 36rpx;
  background: #ff4d4f;
  border-radius: 4rpx;
}

.category-desc {
  padding: 0 30rpx 30rpx;
  background-color: #fff;
  color: #666;
  font-size: 26rpx;
  line-height: 1.6;
  border-bottom: 1px solid #f5f5f5;
}

.product-list {
  padding: 20rpx;
}

.product-item {
  display: flex;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease;
}

.product-item:active {
  transform: scale(0.98);
}

.product-image {
  width: 240rpx;
  height: 240rpx;
  border-radius: 8rpx;
  margin-right: 24rpx;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-name {
  font-size: 30rpx;
  color: #333;
  font-weight: 600;
  display: block;
}

.product-price {
  font-size: 32rpx;
  color: #ff4d4f;
  font-weight: 600;
  margin-top: 16rpx;
  display: block;
}

.product-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  margin-top: 16rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.product-craftsman {
  font-size: 24rpx;
  color: #999;
  margin-top: 16rpx;
}
</style>